<template>
	<div @touchmove.prevent class="calendar-content">
		<div v-if="show_guide" class="guide-mask" @click="hideGuide"></div>
		<div class="guide" v-if="show_guide">
			<img class="guide-img" :src="guide" />
			<img class="guide-img3" :src="guide3" />
		</div>
		<div class="calendar" id="download">
			<img width="100%" height="100%" :src="base_img" />
			<div class="logo-wrap">
				<img class="bg-logo" :src="bg_logo" />
			</div>
			<div class="calendar-date" >
				<div class="calendar-date-img">
					<img :src="date_img"/>
				</div>
				<div class="calendar-suitable">
					<img class="calendar-suitable-img" :src="suitable_img"/>
				</div>
			</div>
		</div>
		<div class="calendar-footer" v-if="show_choice">
			<div class="calendar-footer-tab">
				<div style="display:flex">
					<div
						class="calendar-footer-tab-item"
						v-for="item in tabList"
						:key="item.id"
						>
						<van-button 
							size="small" 
							:class="navActive == item.id ? 'calendar-footer-tab-nav active' : 'calendar-footer-tab-nav'" 
							@click="toggleNav(item.id)"> 
							{{item.text}}
						</van-button>
					</div>
				</div>
				<img class="preview" width="70px" height="30px" @click="showChoice(false)" :src="preview_img"/>
			</div>
			<div class="calendar-footer-choice">
				<div v-if="navActive == 1" class="calendar-footer-choice-item">
					<div
						v-for="item in mainlist"
						:key="item.id"
						class="calendar-footer-choice-item-icon" 
						@click="changeMainImg(item.id)"   >
						<img width="80" height="80" fit="scale-down" :src="item.img" />
						<img v-if="item.id == dateActiveIndex" class="selected" :src="selected" />
					</div>
				</div>
				<div v-if="navActive == 2" class="calendar-footer-choice-item">
					<div
						v-for="item in dolist"
						:key="item.id"
						class="calendar-footer-choice-item-doicon" 
						@click="changeDo(item.id)" >
						<img width="70" height="30" fit="scale-down" :src="item.img" />
						<!-- <img width="80" height="30" fit="scale-down" :src="item.img" /> -->
						<img v-if="item.id == doActiveIndex" class="selected" :src="selected" />
					</div>
				</div>
				<van-image @click="onDownloadPic" width="80" height="30" :src="next_button" fit="scale-down"></van-image>
			</div>
		</div>
		<div v-else class="show-preview" @click="showChoice(true)">
			<img width="70" height="30" :src="show_preview" />
		</div>
	</div>
</template>

<script>
	import { Image, Button, Tab, Tabs, NavBar } from "vant";
	import html2canvas from "html2canvas"
import { setTimeout } from 'timers';
	export default{
		name: "calendar",
		components: {
			[Image.name]: Image,
			[Button.name]: Button,
			[Tab.name]: Tab,
			[Tabs.name]: Tabs,
			[NavBar.name]: NavBar
		},
		data() {
		  return {
			  show_choice: true,
			  base_img: require('../assets/bg-pink.png'),
			  bg_logo: require('../assets/calendar/bg-logo.png'),
			  show_guide: true,
			  guide: 'http://h5static.weiyoho.com/assets/guide-1.png',
			  guide3: 'http://h5static.weiyoho.com/assets/guide-3.png',
			  date_img: '',
			  suitable_img: '',
			  preview_img: 'http://h5static.weiyoho.com/assets/calendar/preview.png',
			  show_preview: require('../assets/calendar/show-preview.png'),
			//   show_preview: 'http://h5static.weiyoho.com/assets/calendar/show-preview.png',
			  selected: 'http://h5static.weiyoho.com/assets/picture/sel.png',
			  dateActiveIndex: 1,
			  doActiveIndex: 1,
			  navActive: 1,
			  next_button: require('../assets/calendar/next.png'),
			//   next_button: 'http://h5static.weiyoho.com/assets/calendar/next.png',
			  tabList:[
			  	{
			  		id: 1,
			  		text: '主图'
			  	},
			  	{
			  		id: 2,
			  		text: '宜'
			  	}
			  ],
			  mainlist:[
			  	{
			  		id: 1,
			  		img: require('../assets/calendar/zero.png'),
			  	},
			  	{
			  		id: 2,
			  		img: require('../assets/calendar/first.png'),
			  	},
			  	{
			  		id: 3,
			  		img: require('../assets/calendar/second.png'),
			  	},
				{
					id: 4,
					img: require('../assets/calendar/third.png'),
				}
			  ],
			  dolist:[
			  	{
			  		id: 1,
			  		img: require('../assets/calendar/do-01.png'),
			  	},
			  	{
			  		id: 2,
			  		img: require('../assets/calendar/do-02.png'),
			  	},
			  	{
			  		id: 3,
			  		img: require('../assets/calendar/do-03.png'),
			  	},
				{
					id: 4,
					img: require('../assets/calendar/do-04.png'),
				}
			  ]
		  };
		},
		mounted() {
			this.date_img = this.mainlist[0].img
			this.suitable_img = this.dolist[0].img
			localStorage.getItem("CALENDAR") ? this.show_guide = false : localStorage.setItem("CALENDAR", 1);
		},
		methods:{
			onDownloadPic() {
				html2canvas(document.querySelector("#download"), {
					useCORS: true,
					backgroundColor: null
					// scale: 5,
				}).then(canvas => {
					this.downloadUrl = canvas.toDataURL("image/jpeg");
					// localStorage.setItem("CANVAS_IMAGE", this.downloadUrl);
					this.$store.commit("updateDownloadImg", this.downloadUrl);
					setTimeout(() => {
						this.$router.replace({ name: 'calendarBlessing', params: { downloadImg: this.downloadUrl }});
					}, 300)
					// this.$router.push({ name: 'calendarBlessing', params: { downloadImg: this.downloadUrl }});
				});
			},
			showChoice(flag){
				this.show_choice = flag
			},
			toggleNav(index){
				this.navActive = index
			},
			changeMainImg(index){
				this.dateActiveIndex = index
				this.date_img = this.mainlist[--index].img
			},
			changeDo(index){
				this.doActiveIndex = index
				this.suitable_img = this.dolist[--index].img
			},
			hideGuide(){
				this.show_guide = false
			},
			/**
			 * @desc 跳转页面
			 */
			// pageTo(url){
			// 	this.onDownloadPic();
			// 	this.$router.push(url)
			// }
		}
	}
</script>

<style lang="less">
	.calendar-content{
		.guide-mask{
			width: 100vw;
			height: 100vh;
			position: absolute;
			background-color: #000000;
			opacity: 0.7;
			top: 0;
			left: 0;
			z-index: 999;
		}
		.guide-img{
			position: absolute;
			left: 0;
			bottom: 33vh;
			width: 180px;
			z-index: 999;
		}
		.guide-img3{
			position: absolute;
			right: 0;
			bottom: 15vh;
			width: 180px;
			z-index: 999;
		}
		.calendar{
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100vh;
			overflow: hidden;
			.logo-wrap {
				position: absolute;
				bottom: 11vh;
				display: flex;
				justify-content: center;
				width: 100%;
				// z-index: 1;

				.bg-logo {
					width: 128px;
					height: 43px;
				}
			}
			&-date{
				position: relative;
				top: -90vh;
				width: 100vw;
				overflow: hidden;
				z-index: 1;
				display: flex;
				flex-direction: column;
				justify-content: center;
				&-img{
					img{
						width: 70vw;
						height: 40vh;
					}
				}
			}
			&-suitable{
				position: relative;
				left: 0;
				margin-top: 10px;
				width: 100vw;
				overflow: hidden;
				z-index: 1;
				&-img{
					width: 50%;
					height: 40%;
				}
			}
		}
		.calendar-footer{
			position: absolute;
			bottom: -10px;
			left: 0;
			width: 100%;
			// height: 30%;
			&-tab{
				display: flex;
				justify-content: space-between;
				position: position;
				width: 100%;
				left: 0;
				bottom: 0;
				display: flex;
				// flex-direction: row;
				// justify-content: space-around;
				&-nav{
					width: 70px;
					background-color: #ffcccc;
					border: 0;
				}
				&-item{
					display: flex;
					flex-direction: row;
					width: 70px !important;
				}
			}
			&-choice{
				position: relative;
				// top: -10px;
				bottom: 0;
				padding: 10px;
				background-color: #fff5ec;
				// background: url(../assets/picture/pre-box.png) no-repeat;
				// background-size: 100% 100%;
				&-item{
					display: flex;
					flex-direction: row;
					justify-content: space-around;
					padding-bottom: 10px;
					&-icon{
						border: 1px solid red;
						border-radius: 5px;
						position: relative;
						width: 80px;
						height: 80px;
					}
					&-doicon{
						display: flex;
						justify-content: center;
						border: 1px solid red;
						border-radius: 5px;
						position: relative;
						width: 80px;
						height: 80px;
						box-sizing: border-box;
						padding-top: 25px;
					}
				}
			}
			.selected{
				width: 20px;
				height: 20px;
				position: absolute;
				top: 65px;
				right: 25px;
			}
		}
		&-choice{
			position: absolute;
			left: 0;
			bottom: 0px;
			width: 100%;
			z-index: 2;
			&-date,&-do{
				width: 80px;
				height: 80px;
				border-radius: 50%;
				background-color: #ffffff;
				overflow: hidden;
			}
			.next-button{
				width: 100%;
				padding: 10px 0;
			}
		}
		.active{
			background-color: #b62431;
			color: #ffffff;
		}
		.preview{
			position: relative;
			// left: 170px;
		}
		.show-preview{
			position: absolute;
			bottom: 10px;
			right: 10px;
		}
	}
</style>
